<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>设置</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../styles/app.css" />
		<style type="text/css">
			.bcgContainer {
				/*background: url(../images/coffee1.png) no-repeat center center;*/
				background: #E8CCAE;
				text-align: center;
			}
			
			.Pusername {
				font-size: 18px;
			}
			
			.bcgContainer img {
				margin-top: 60px;
				display: inline-block;
				box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
				border-radius: 50%;
			}
			#templateContainer{
				margin: 20px 0; 
			}
		</style>
	</head>

	<body>
		<div class="bcgContainer mui-container">
			<img src="../images/bcg03.jpg" alt="" />
			<div class="my-info mui-row">
				<!--<div class="mui-col-xs-4">
				</div>-->
				<div class="mui-col-sm-8">
					<p class='Pusername'>用户名：<span id='username'></span></p>
				</div>
			</div>
		</div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<span class="mui-icon mui-icon-contact colorOrange colorFize"></span>
				<span class="name">姓名：</span>
			</li>
			<li class="mui-table-view-cell">
				<span class="mui-icon mui-icon-person colorLight colorFize"></span>
				<span class="sex">性别：</span>
			</li>
			<li class="mui-table-view-cell">
				<span class='mui-icon mui-icon-phone colorBlue colorFize'></span>
				<span class="tel">电话：</span>
			</li>
			<li class="mui-table-view-cell">
				<span class='mui-icon mui-icon-star colorFize colorGreen'></span>
				<span class="school">学校：</span>
			</li>
			<li class="mui-table-view-cell">
				<span class='mui-icon mui-icon-compose colorPurple colorFize'></span>
				<span class="class">班级：</span>
			</li>
			<li class="mui-table-view-cell">
				<span class='mui-icon mui-icon-flag colorBlack colorFize'></span>
				<span class="age">年龄:</span>
			</li>
		</ul>
		<ul id='templateContainer' class="mui-table-view version">
			<li class="mui-table-view-cell">
				<span>Version</span>
				<span class="mui-badge mui-badge-inverted">1.1.1</span>
			</li>
			<li class="mui-table-view-cell">
				<span>About</span>
				<span class="mui-badge mui-badge-inverted">版本升级</span>
			</li>
		</ul>
		<button type="button" id='changeAccount' class="mui-btn mui-btn-green mui-btn-block">切换账号</button>
	</body>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript">
		(function($, doc) {
			$.init();
			$.plusReady(function() {
				doc.getElementById('username').innerText = plus.storage.getItem('username');
				var login = null;
				doc.getElementById('changeAccount').addEventListener('tap', function() {
					if(login = plus.webview.getWebviewById('login')) {
						login.show();
					} else {
						//若login为空
						login = plus.webview.create('login.html', 'login');
						login.show('slide-in-bottom', 500);
					}
					plus.storage.removeItem('login');

				});

			});
		})(mui, document);
	</script>

</html>